{% from 'macros/icon.njk' import icon with context %}

{% macro heroCard() %}
<div class="hero-card width-full rounded-lg bg-blue-lighter pad-400 masonry:pad-right-500 masonry:pad-top-1000 masonry:pad-bottom-1000 masonry:pad-left-500">
  <div class="hero-card__inner">
    <div>
      <h1 class="type--h1 color-blue-darkest">
        Welcome!
      </h1>
      <p class="gap-top-300">
        This is Chrome's official site to help you build Extensions, publish on the Chrome Web Store, optimize your website, and more.
      </p>
      <a href="/docs/" class="material-button button-filled button-round display-inline-flex color-bg bg-primary gap-top-400">
        Start building
      </a>
    </div>
    <div class="justify-self-end gap-top-300 masonry:gap-top-0">
      {% Img
        class="width-full",
        src="image/QMjXarRXcMarxQddwrEdPvHVM242/uyy9OtWHTcxH5sK5VuRA.png",
        alt="Construction crane lifting a resource into a Chrome tab",
        width="264",
        height="132",
        sizes="(min-width: 592px) 597px, calc(100vw - 96px)"
      %}
    </div>
  </div>
</div>
{% endmacro %}
